<template>
    <div class="mine">
        <!--头部-->
        <Header/>

        <!--个人中心头部 Start-->
        <div class="mine-header">
            <!--Logo-->
            <article>
                <div class="mh-logo">
                    <a class="mh-tblogo" title="解忧杂货店" href="javascript:;"></a>
                </div>
            </article>
        </div>
        <!--个人中心头部 End-->

        <!--内容 Start-->
        <div class="mj-body fn-clear">
            <!--左侧菜单 Start-->
            <div class="mj-menu">
                <span class="mj-menu-title">全部功能</span>
                <ul>
                    <router-link :to="{name:'mine-info'}" tag="li">个人信息</router-link>
                    <router-link :to="{name:'mine-footprint'}" tag="li">我的足迹</router-link>
                </ul>
            </div>
            <!--左侧菜单 End-->

            <!--右侧菜单内容 Start-->
            <div class="mj-menu-content">
                <el-collapse-transition>
                    <router-view></router-view>
                </el-collapse-transition>
            </div>
            <!--右侧菜单内容 End-->
        </div>
        <!--内容 End-->

    </div>
</template>

<script>
    import Header from "../../components/Header"

    export default {
        name: "mine",
        components: {Header},
    }
</script>

<style scoped lang="less">
    .mine {
        /*为了抵消头部高度差*/
        margin-top: 36px;

        /*我的解忧 头部*/

        .mine-header {
            width: 100%;
            height: 36px;
            background: #ff4401;
            padding: 12px 0;
            position: relative;
            z-index: 5;
            border-bottom: 1px #e7e7e7 solid;


            article {
                width: 1200px;
                margin: 0 auto;
                _overflow: hidden;
                min-width: 860px;

                .mh-logo {
                    float: left;
                    position: relative;
                    overflow: hidden;
                    width: 16%;
                    height: 35px;
                    margin-left: 0;

                    .mh-tblogo {
                        width: 140px;
                        height: 36px;
                        display: inline-block;
                        vertical-align: middle;
                        background-image: -webkit-image-set(url(//img.alicdn.com/tps/i4/T1IraRFjVcXXcEPB2X-140-34.png) 1x, url(//img.alicdn.com/tps/i1/T1KXqHFbdbXXaqVtDA-280-62.png) 2x);
                        background-repeat: no-repeat;
                        background-position: left center;
                    }
                }
            }

        }

        /*内容*/

        .mj-body {
            width: 1200px;
            margin: 20px auto;
            /*左侧菜单*/

            .mj-menu {
                width: 200px;
                float: left;

                .mj-menu-title {
                    font-size: 18px;
                    line-height: 28px;
                    margin: 5px 10px 1px 0;
                    color: #f40;

                }

                ul {
                    li {
                        display: block;
                        overflow: hidden;
                        text-decoration: none;
                        line-height: 28px;
                        color: #000;
                        height: 28px;
                        cursor: pointer;
                        font-size: 13px;
                    }

                    li:hover {
                        color: #f40;
                    }
                }
            }

            .mj-menu-content {
                float: left;
                width: 800px;
            }
        }
    }
</style>